import React, {useCallback, useRef, useState, useEffect} from 'react';
import {PlusOutlined, SettingOutlined} from '@ant-design/icons';
import {history, useModel} from 'umi';
import styles from './index.less';
import ProForm, {
  ModalForm,
  ProFormText,
  ProFormDateRangePicker,
  ProFormSelect, ProFormUploadButton,
  ProFormRadio,
} from '@ant-design/pro-form';
import {Button, Modal} from "antd";
import BDStorageUtils from '@/utils/BDStorageUtils'



const NetworkCardSetting = () => {

  const [show, setShow] = useState(false)
  const [type, setType] = useState("仓库系统")
  const [submittedValue, setSubmittedValue] = useState({})


  const formRef = useRef()

  const onValuesChanged = (values) => {
    console.log(values)
    setSubmittedValue(values)
  }

  const onSubmit = (values) => {
    console.log(values)
    BDStorageUtils.saveNetworkCard(values)
  }

  useEffect(()=>{
    setSubmittedValue(BDStorageUtils.getNetworkCard)
  },[])


  return (
    <>
       <span
         className={styles.action}
         onClick={() => {
            setShow(true)
         }}
       >
        <SettingOutlined/>
    </span>

      <Modal title="数联网网卡配置"
             visible={show}
             width={800}
             centered
             onOk={() => {setShow(false)}}
             onCancel={() => {setShow(false)}}
      >
        <ProFormRadio.Group
          style={{
            margin: 16,
          }}
          radioType="button"
          fieldProps={{
            value: type,
            onChange: (e) => {
              console.log(e.target.value)
              setType(e.target.value)
            },
          }}
          options={[
            'GRS',
            'LRS',
            '注册系统',
            '仓库系统',
            '代理',
            '硬件',
          ]}
        />
        <ProForm
          formRef={formRef}
          initialValues={
            submittedValue
          }
          onValuesChange={(_, values) => {
            onValuesChanged(values);
          }}
          submitter={{
            searchConfig: {
              submitText: "保存"
            },
          }}
          onFinish={async (values) => {
            onSubmit(values)
          }}
        >
          <ProFormText
            width="md"
            name="grs"
            style={{display: "none"}}
            label="GRS地址"
            placeholder="请输入GRS地址"
          />
          <ProFormText
            width="md"
            name="irs"
            style={{visibility: type === "LRS" ? "visible" : "hidden"}}
            label="LRS地址"
            placeholder="请输入LRS地址"
          />
          <ProFormText
            width="md"
            name="reg"
            style={{visibility: type === "注册系统" ? "visible" : "hidden"}}
            label="注册表地址"
            placeholder="请输入注册表地址"
          />
          <ProFormText
            width="md"
            name="repo"
            style={{visibility: type === "仓库系统" ? "visible" : "hidden"}}
            label="仓库地址"
            placeholder="请输入仓库地址"
          />
          <ProFormText
            width="md"
            name="proxy"
            style={{visibility: type === "代理" ? "visible" : "hidden"}}
            label="代理地址"
            placeholder="请输入代理地址"
          />
        </ProForm>

      </Modal>

    </>
  )
};

export default NetworkCardSetting;
